<template>
	<div>
		<div style="margin-bottom: 10px;">
			<Button type="primary" @click="add">
				<Icon type="md-add"></Icon> 
				新增轮播图
			</Button>
		</div>

		<Table border :columns="columns" :data="data"></Table>

		<Modal v-model="model" :title="modalType+'轮播图'" :mask-closable="false" :footer-hide="true" width='40%'>
			<Form :model="formItem" :label-width="80" ref="formValidate" >
				<FormItem label="产品排序">
					<Input v-model="formItem.showOrder" placeholder="请输入产品名称"></Input>
				</FormItem>
				<FormItem label="图片">
					<Upload :action="$baseUrl+'uploadFile/upload/file'" name="file" :show-upload-list="false" :format="['jpg','png']" :max-size="10*1024" :on-success="handleSuccess" :on-format-error="formatError" :on-exceeded-size="exceededSize">
						<Button icon="ios-cloud-upload-outline">上传图片</Button>
					</Upload>
				</FormItem>
				<FormItem label="" v-show="imgList.length>0">
					<div class="img-item" v-for="(item,index) in imgList">
						<div class="wrap-head">
							<img :src="item.fileUrl" alt="" />
						</div>
						<div class="wrap-foot" @click="delImg(index)">
							<Icon type="ios-trash-outline" size="20" />
						</div>
					</div>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="submit">确认</Button>
					<Button style="margin-left: 8px" @click="cancel">取消</Button>
				</FormItem>
			</Form>
		</Modal>
			
	</div>

</template>
<script>
	import rowImages from '@/components/image/row-images.vue'
	export default {
		components: {
			rowImages
		},
		data() {
			return {
				removeModal:false,
				currentId: '',
				modalType: null,
				imgList: [],
				params:{
					current:1,
					relationTableId:1,
					size:10
				},				
				searchCategoryList: [],
				categoryList:null,
				total:0,
				formItem: {
					showOrder: '',
					relationTableId:1
				},
				model: false,
				columns: [				
				    {
						title: '产品图片',
						searchItemAble: false,
						minWidth: 100,
						align: 'center',
						render: (h, params) => {
							if(params.row.uploadFile.fileUrl) {
								var images = new Array()
								images[0] = {
									'thumb': params.row.uploadFile.fileUrl,
									'image': params.row.uploadFile.fileUrl
								}
								return h(rowImages, {
									props: {
										images: images,
										dwidth: 180,
										dheight: 100
									}
								})
							} else {
								return h('div', '暂无图片');
							}
						}
					},
					{
						title: '排序',
						key: 'showOrder'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.edit(params.row)
										}
									}
								}, '编辑')
							]);
						}
					}
				],
				data: []
			}
		},
		methods: {
			// 下架接口
			delOk() {
				let params={
					ids:this.currentId
				}
				this.$Axios.Post(this.$baseUrl+'relationFile/remove',params).then(res => {
					this.removeModal = false
					this.afterRequest(res)
				})
			},				
			remove(row) {
				this.removeModal = true
				this.currentId = row.id
			},					
			// 图片上传成功后执行
			handleSuccess(response, file, fileList) {
				this.imgList = []
				this.imgList.push(response)
			},
			// 文件格式错误
			formatError() {
				this.$Notice.error({
					title: '文件格式只支持jpg,png',
					desc: false
				});
			},
			// 文件大小超出
			exceededSize() {
				this.$Notice.error({
					title: '文件大小超出10M',
					desc: false
				});
			},
            changePage (res) {
            	this.params.current=res
                this.onLoad()
            },
			resetForm() {
				this.formItem = {
					showOrder: '',
					relationTableId:1
				}
				this.imgList = []
			},
			add() {
				this.model = true
				this.modalType = '新增'
				this.resetForm()
			},
			edit(row){
				this.currentId=row.id
				this.modalType = '编辑'
				this.model = true
				this.formItem = {
					showOrder: row.showOrder,
					relationTableId:1
				}	
				this.imgList=[]
				this.imgList.push(row.uploadFile)
			},
			cancel() {
				this.model = false
			},
			afterRequest(B) {
				if(B) {
					this.$Notice.success({
						title: '操作成功',
						desc: false
					});
					this.model = false
					this.onLoad()
				} else {
					this.$Notice.error({
						title: '操作失败',
						desc: false
					});
				}
			},
			submit() {
				if(this.imgList.length > 0) {
					this.formItem.fileId = this.imgList[0].id
				} else {
					this.formItem.fileId = ''
				}						
				let url;
				if(this.modalType == '新增') {
					url = this.$baseUrl+'relationFile/save'
				} else {
					this.formItem.id=this.currentId
					url = this.$baseUrl+'relationFile/update'
				}
				this.$Axios.Post(url, this.formItem).then(res => {
					this.afterRequest(res)
				})
			},
			delImg(index) {
				this.imgList.splice(index, 1);
			},
			search(){
				this.params.current=1
				this.onLoad()
			},
			onLoad() {		
				this.$Axios.Post(this.$baseUrl+'relationFile/homePage',this.params).then(res => {
					this.data = res.records
					this.total=res.total
				})
			}

		},
		mounted() {			
			this.onLoad()
		}
	}
</script>
<style scoped="">
	.fuzhu {
		margin-left: 10px;
		color: #BCBCBC;
	}
	
	.img-item {
		width: 100px;
		border: 1px solid #BCBCBC;
		float: left;
		margin-right: 4px;
	}
	
	.wrap-head {
		width: 100%;
		height: 100px;
	}
	
	.img-item img {
		width: 100%;
		height: 100%;
	}
	
	.wrap-foot {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4px 0;
		cursor: pointer;
	}
</style>